<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>表单新增type属性</title>
</head>
<body>
    <form action="">
        <p>用户名：<input type="text" name="userName"></p>
        <p>密码：<input type="password" name="userPassword"></p>
        <!-- email 默认提供了电子邮箱的完整验证：要求必须包含@符号，同时必须包含域名，如果不满足验证，会阻止当前数据的提交 -->
        <p>邮箱：<input type="email" name="userEmail"></p>
        <!-- tel 并不是来实现验证，它的本质目的是为了能够在移动端打开数字键盘。意味着数字键盘限制了用户只能输入数字。 -->
        <p>电话：<input type="tel" name="userPhone"></p>
        <!-- 验证只能输入合法的网址 -->
        <p>网址：<input type="url" name="userWebSite"></p>
        <!-- number：只能输入数字（包含小数点），不能输入其他的字符
                max：最大值
                min：最小值
                value：默认值
        -->
        <p>数值：<input type="number" name="userNumber"></p>
        <!-- search：可以提供更人性化的输入体验 -->
        <p>请输入商品名称：<input type="search"></p>
        <!-- range：范围选择，最小值 0 最大值 100 默认 50 -->
        <p>范围：<input type="range"></p>
        <p>颜色：<input type="color"></p>
        <!-- 日期时间相关 -->
        <!-- 时间 -->
        <p>时间：<input type="time"></p>
        <!-- 日期 -->
        <p>日期：<input type="date"></p>
        <!-- datetime 大多数浏览器都不支持 只有 safari 支持 -->
        <p>日期时间：<input type="datetime"></p>
        <p>日期时间：<input type="datetime-local"></p>
        <!-- 月份 -->
        <p>月份：<input type="month"></p>
        <!-- 星期 -->
        <p>星期：<input type="week"></p>
        <p><input type="submit" value="提交"></p>
    </form>
</body>
</html>